/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import {BaseElement, element} from "../../../base-ui/BaseElement.js";
import {SpSchedulingAnalysis} from "./SpSchedulingAnalysis.js";
import {DrawerCpuTabs} from "./DrawerCpuTabs.js";
import {LitChartPie} from "../../../base-ui/chart/pie/LitChartPie.js";
import {LitDrawer} from "../../../base-ui/drawer/LitDrawer.js";
import '../../../base-ui/drawer/LitDrawer.js'
import './DrawerCpuTabs.js'
import {procedurePool} from "../../database/Procedure.js";
import {info} from "../../../log/Log.js";
import {LitSelect} from "../../../base-ui/select/LitSelect";
import "../../../base-ui/progress-bar/LitProgressBar.js"
import {LitProgressBar} from "../../../base-ui/progress-bar/LitProgressBar.js";

@element('tab-cpu-analysis')
export class TabCpuAnalysis extends BaseElement {
    private cpuUsageGrid:HTMLDivElement|undefined;
    private cpuUsageChart:HTMLDivElement|undefined;
    private drawer:LitDrawer|undefined|null;
    private cpuPieMap:Map<number,LitChartPie> = new Map<number, LitChartPie>()
    private schedulingSelect:LitSelect|undefined|null;
    private drawerCpuTabs:DrawerCpuTabs|undefined|null;
    private progress:LitProgressBar | null | undefined;
    private loadingUsage:boolean = false;
    private loadingPieData:boolean = false;

    initElements(): void {
        this.progress = this.shadowRoot!.querySelector<LitProgressBar>("#loading")
        this.cpuUsageGrid = this.shadowRoot?.querySelector("#cpu_usage_table") as HTMLDivElement
        this.cpuUsageChart = this.shadowRoot?.querySelector("#cpu_usage_chart") as HTMLDivElement
        this.schedulingSelect = this.shadowRoot?.querySelector<LitSelect>("#scheduling_select")
        this.drawer = this.shadowRoot!.querySelector<LitDrawer>('#drawer-right')
        this.drawerCpuTabs = this.shadowRoot?.querySelector<DrawerCpuTabs>('#drawer-cpu-tabs')
        this.schedulingSelect!.onchange = (e)=>{
            this.loadingPieData = true;
            this.progress!.loading = (this.loadingUsage || this.loadingPieData)
            this.queryPieChartDataByType((e as any).detail.text)
        }
    }

    init(){
        this.cpuPieMap.clear()
        this.cpuUsageGrid!.innerHTML = ''
        this.cpuUsageChart!.innerHTML = ''
        this.schedulingSelect!.value = "1";
        this.cpuUsageGrid!.append(this.createUsageItem("usage", "%"))
        for (let i = 0; i < SpSchedulingAnalysis.cpuCount; i++) {
            let cpuPie = new LitChartPie();
            cpuPie.className='pie-chart'
            this.cpuPieMap.set(i,cpuPie)
            this.cpuUsageGrid!.append(this.createUsageItem(`CPU: ${i}`, 0))
            this.cpuUsageChart!.append(this.createUsageChartItem(i,cpuPie))
        }
        this.loadingUsage= true
        this.loadingPieData = true;
        this.progress!.loading = (this.loadingUsage || this.loadingPieData)
        this.queryLogicWorker("scheduling-getCpuUsage","query Cpu Usage Time:",(res)=>{
            this.cpuUsageGrid!.innerHTML = ''
            this.cpuUsageGrid!.append(this.createUsageItem("usage", "%"))
            if(res instanceof Array){
                for (let re of res) {
                    this.cpuUsageGrid!.append(this.createUsageItem(`CPU: ${re.cpu}`, ((re.usage || 0) * 100).toFixed(2)))
                }
            }
            this.loadingUsage = false;
            this.progress!.loading = (this.loadingUsage || this.loadingPieData)
        })
        this.queryPieChartDataByType("CPU Frequency")
    }

    queryPieChartDataByType(type:string){
        let tip = ""
        if(type === "CPU Frequency"){
            tip = "freq:"
        }else if(type === "CPU Idle"){
            tip = "idle:"
        }else{
            tip = "irq:"
        }
        this.queryLogicWorker(`scheduling-${type}`,`query ${type} Analysis Time:`,(res)=>{
            for (let key of this.cpuPieMap.keys()) {
                this.cpuPieMap.get(key)!.config = {
                    appendPadding: 10,
                    data:res.get(key) || [],
                    angleField: 'sum',
                    colorField: 'value',
                    radius: 0.8,
                    tip:(obj)=>{
                        return `<div>
                                    <div>${tip}${obj.obj.value}</div> 
                                    <div>ratio:${obj.obj.ratio}%</div>
                                </div>
                                `
                    },
                    label: {
                        type: 'outer',
                    },
                    interactions: [
                        {
                            type: 'element-active',
                        },
                    ],
                }
            }
            this.loadingPieData = false;
            this.progress!.loading = (this.loadingUsage || this.loadingPieData)
        })
    }

    queryLogicWorker(option:string,log:string,handler:(res:any) => void){
        let time = new Date().getTime();
        procedurePool.submitWithName("logic1", option, { endTs:SpSchedulingAnalysis.endTs,total:SpSchedulingAnalysis.totalDur }, undefined, handler)
        let durTime = new Date().getTime() - time;
        info(log, durTime)
    }

    createUsageItem(name:string,value:any){
        let div = document.createElement('div');
        div.className = "usage_item_box";
        div.innerHTML = `<div class="usage_item">${name}</div><div class="usage_item">${value}</div>`
        return div
    }

    createUsageChartItem(cpu:number,pie:LitChartPie){
        let div = document.createElement('div');
        div.className = "usage_chart"
        div.style.cursor = "pointer"
        div.innerHTML = `
            <div style="height: 40px;line-height: 40px;margin-left: 10px">CPU: ${cpu}</div>
        `
        div.append(pie)
        div.addEventListener("click",(event)=>{
            this.drawer!.title = `CPU: ${cpu}`;
            this.drawer!.visible = true;
            this.drawerCpuTabs!.init(cpu,this.schedulingSelect!.value)
        })
        return div
    }

    initHtml(): string {
        return `
        <style>
        :host {
            width: 100%;
            height: 100%;
            background-color: var(--dark-background,#FFFFFF);
        }
        .cpu_usage{
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 15px;
            background-color: var(--dark-background,#FFFFFF);
        }
        .usage_item{
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: solid 1px var(--dark-border1,#f0f0f0);
        }
        .usage_item_box{
            border: solid 1px var(--dark-border1,#f0f0f0);
            flex: 1;
        }
        .usage_chart{
            height: 360px;
            color: var(--dark-color1,#252525);
            background-color: var(--dark-background,#FFFFFF);
        }
        .pie-chart{
            display: flex;
            box-sizing: border-box;
            height: 300px;
        }
        .grid_usage{
            display: grid;
            width: 100%;
            box-sizing: border-box;
            grid-template-columns: repeat(4,calc((100% - 30px) / 4));
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            padding: 10px;
            background-color: var(--dark-background5,#F6F6F6);
        }
        .cpu-statistics{
            height: 50px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding:0px 15px;
            background-color: var(--dark-background,#FFFFFF);
        }
        </style>
        <div style="display: flex;flex-direction: column;overflow-x: hidden;overflow-y: auto;height: 100%">
            <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar>
            <div class="cpu_usage" id="cpu_usage_table"></div>
            <div class="cpu-statistics">
                <div>CPU Statistics</div>
                <lit-select default-value="1" id="scheduling_select">
                    <lit-select-option value="1">CPU Frequency</lit-select-option>
                    <lit-select-option value="2">CPU Idle</lit-select-option>
                    <lit-select-option value="3">CPU Irq</lit-select-option>
                </lit-select>
            </div>
            <div class="grid_usage" id="cpu_usage_chart"></div>
        </div>
        <lit-drawer id="drawer-right" title="CPU：0" content-width="65vw" placement="right" style="position: fixed" fixed mask mask-closeable closeable content-padding="0">
            <drawer-cpu-tabs id="drawer-cpu-tabs"></drawer-cpu-tabs>
        </lit-drawer>
        `;
    }
}
